.ona {
    height: 100%;

    .ona_wrap {
        height: 100%;
        padding-top: var(--m20);

        .info {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background: var(--btn-bg);
            border: .2667vw solid var(--input-border);
            margin: 0 var(--m16);
            border-radius: var(--m16);
            background-color: rgba(255,255,255,.5);
            .total_txt {
                display: flex;
                margin: 4.266vw 0 var(--m12);
                font-family: 'Montserrat-Light';
                font-size: 2.66vw;
                align-items: center;
                text-align: center;
                letter-spacing: -0.04em;
                color: #A5A5AB;
            }

            .balance {
                display: flex;
                align-items: baseline;
                font-family: 'Montserrat-Medium';
                font-style: normal;
                font-weight: 400;
                text-align: center;
                line-height: 1;
                /* Black */
                color: var(--font-color);
                &.noBalance {
                    align-items: center;
                }
                .unit,
                .integer {
                    font-size: 4.2667vw;
                    font-family: 'Montserrat-Regular';
                }
                .integer {
                    font-size: 7.7714vw;
                }
                .decimals {
                    font-size: 4.2667vw;
                }
            }

            .options {
                width: 56vw;
                display: flex;
                justify-content: space-between;
                margin: 4.2667vw 0 5.33vw;

                .btn {
                    cursor: pointer;
                    background: var(--primary-bg);
                    border-radius: 4.27vw;
                    width: 27.3vw;
                    height: 8.5333vw;
                    color: #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border: .2667vw solid var(--input-border);

                    span {
                        font-family: 'Montserrat-Medium';
                        font-style: normal;
                        font-weight: 500;
                        font-size: 3.4667vw;
                        text-transform: capitalize;
                    }
                    &:first-child {
                        margin-right: var(--m12);
                    }

                    &:last-of-type {
                        .icon {
                            margin-right: 1.0667vw;
                        }
                    }

                    .icon {
                        display: block;
                        height: 5.33vw;
                        margin-right: 1.2267vw;


                    }
                }
            }
        }

        .currency {
            padding-top: var(--m20);

            .head {
                padding: 0 var(--m16);
                display: flex;
                justify-content: space-between;
                font-family: Montserrat-Medium;
                .title {
                    font-family: 'Montserrat-Bold';
                    font-style: normal;
                    font-weight: 500;
                    font-size:  var(--m13);
                    display: flex;
                    align-items: center;
                    text-transform: uppercase;
                    color: var(--secondary-middle-text);
                }

                .switch {
                    cursor: pointer;
                    font-family: 'Montserrat-Bold';
                    font-style: normal;
                    font-weight: 700;
                    font-size: 3.4667vw;
                    /* identical to box height */

                    display: flex;
                    align-items: center;
                    text-align: right;
                    color: var(--field-text);
                }
            }

            .srcoller_viewport {
                margin-top: var(--m16);
                height: 44vw;
                overflow-y: scroll;
                padding: 0 var(--m16);

                .scroller {
                    .scroll_wrap {
                        .list {
                            padding-bottom: var(--m20);

                            .list_item {
                                cursor: pointer;
                                padding: var(--m20) 0;
                                border-bottom: 0.5px solid rgba(15, 15, 16, 0.1);
                                display: flex;
                                justify-content: space-between;
                                align-items: center;

                                .coin {
                                    flex: 1;
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;

                                    .coin_icon {
                                        width: 6.4vw;
                                        height: 6.4vw;
                                        margin-right: var(--m12);


                                    }


                                    .name {
                                        flex: 1;
                                        font-weight: 500;
                                        font-size: 4.2667vw;
                                        /* identical to box height */
                                        justify-self: flex-start;

                                        color: var(--font-color);

                                    }

                                    .value {
                                        font-family: 'Montserrat-Bold';
                                        font-style: normal;

                                        /* identical to box height */


                                        /* Black */

                                        color: var(--font-color);

                                        .num {
                                            font-weight: 500;
                                            font-size: 4vw;
                                            text-align: right;
                                            font-family: Montserrat-Medium;
                                        }

                                        .usd {
                                            font-family: 'Montserrat-Light';
                                            font-weight: 500;
                                            font-size: 2.4vw;
                                            color: var(--secondary-middle-text);
                                            text-align: right;
                                        }
                                    }
                                }

                                .arrow {
                                    width: 4.2667vw;
                                    height: 4.2667vw;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    margin-left: 1.0667vw;

                                    img {
                                        display: block;
                                        height: 2.9867vw;
                                    }
                                }
                            }
                        }

                        .add_token {
                            margin-top: 5.3333vw;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-weight: 500;
                            font-size: 4vw;
                            color: var(--main-text);
                            padding-bottom: 13.3333vw;

                            img {
                                width: 5.3333vw;
                                height: 5.3333vw;
                                margin-right: 1.6vw;
                            }
                        }
                    }
                }
            }


        }
    }
}

.desc {
    position: absolute;
    background-color: #fff;
    height: 6.1333vw;
    bottom: 0;
    width: 100%;
    left: 0;
    text-align: center;
    font-weight: 500;
    font-size: 2.4vw;
    /* identical to box height */

    display: flex;
    align-items: center;
    justify-content: center;

    /* Gray_20 */

    color: #C9CED5;
}



@media screen and (min-width:1280px) {
    .ona {
        height: 100%;
    
        .ona_wrap {
            height: 100%;
            padding-top: var(--pc20);
    
            .info {
                box-shadow: 0px 1.2535px 2.5065px rgba(9, 3, 39, 0.12);
                border: 1.2535px solid var(--input-border);
                margin: 0 var(--pc16);
                border-radius: var(--pc16);
    
                .total_txt {
                    margin: 20px 0 15px;
                    font-size: 12.5px;
                }
    
                .balance {
                    font-size: var(--pc28);
                    .unit,
                    .integer {
                        font-size: var(--pc16);
                        margin: 0 2.5065px 0 0;
                    }
                    .integer {
                        font-size: var(--pc28);
                    }
                    .decimals {
                        font-size: 20.0535px;
                    }
                }
    
                .options {
                    width: 263.2px;
                    margin: 20.0535px 0 25px;
    
                    .btn {
                        background: var(--primary-bg);
                        width: 130px;
                        height: 40px;
                        border-radius: 20px;
                        border: 1.2535px solid var(--input-border);
    
                        span {
                            font-size: 16.2935px;
                        }
                        &:first-child {
                            margin-right: 15px;
                        }
                        &:last-of-type {
                            .icon {
                                margin-right: 5.0135px;
                            }
                        }
    
                        .icon {
                            display: block;
                            height: 25px;
                            margin-right: 5.7655px;
    
    
                        }
                    }
                }
            }
    
            .currency {
                padding-top: var(--pc20);
                .head {
                    padding: 0 var(--pc16);
    
                    .title {
                        font-size: var(--pc12);
                    }
    
                    .switch {
                        font-size: var(--pc13);
                    }
                }
    
                .srcoller_viewport {
                    margin-top: var(--pc16);
                    height: 225.6px;
                    overflow-y: scroll;
                    padding: 0 var(--pc16);
    
                    .scroller {
                        .scroll_wrap {
                            .list {
                                padding-bottom: var(--pc20);
    
                                .list_item {
                                    padding: var(--pc20) 0;
                                    border-bottom: 0.5px solid rgba(15, 15, 16, 0.1);
    
                                    .coin {

                                        .coin_icon {
                                            width: 30.08px;
                                            height: 30.08px;
                                            margin-right: 15.04px;
    
    
                                        }
    
    
                                        .name {
                                            flex: 1;
                                            font-weight: 600;
                                            font-size: 20.0535px;
                                
                                        }
    
                                        .value {
                  
    
                                            .num {
                                                font-weight: 500;
                                                font-size: 18.75px;
                                                text-align: right;
                                            }
    
                                            .usd {
                                                font-weight: 500;
                                                font-size: 11.28px;
                                            }
                                        }
                                    }
    
                                    .arrow {
                                        width: 20.0535px;
                                        height: 20.0535px;
                                        margin-left: 5.0135px;
    
                                        img {
                                            display: block;
                                            height: 14.0375px;
                                        }
                                    }
                                }
                            }
    
                            .add_token {
                                margin-top: 25.0665px;
                                font-weight: 500;
                                font-size: 18.8px;
                                color: var(--main-text);
                                padding-bottom: 62.6665px;
    
                                img {
                                    width: 25.0665px;
                                    height: 25.0665px;
                                    margin-right: 7.52px;
                                }
                            }
                        }
                    }
                }
    
    
            }
        }
    }
    
    .desc {
        position: absolute;
        background-color: #fff;
        height: 28.8265px;
        bottom: 0;
        width: 100%;
        left: 0;
        text-align: center;
        font-weight: 500;
        font-size: 11.28px;
        /* identical to box height */
    
        display: flex;
        align-items: center;
        justify-content: center;
    
        /* Gray_20 */
    
        color: #C9CED5;
    }
}